<template>
    <div class="booking-page">
        <!-- 顶部导航 -->
        <page-header title="预约挂号" />

        <div class="page-content">
            <!-- 医院信息 -->
            <div class="hospital-info">
                <div class="hospital-name">{{ hospital.name }}</div>
                <div class="department-name">{{ selectedDepartment || '请选择科室' }}</div>
            </div>

            <!-- 选择就诊人 -->
            <div class="section patient-section">
                <div class="section-title">选择就诊人</div>
                <van-cell-group inset>
                    <van-cell is-link center @click="showPatientPopup = true">
                        <template #title>
                            <div class="patient-info">
                                <div v-if="selectedPatient">
                                    <div class="patient-name">{{ selectedPatient.name }}</div>
                                    <div class="patient-id">{{ selectedPatient.idCard }}</div>
                                </div>
                                <div v-else>请选择就诊人</div>
                            </div>
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>

            <!-- 选择科室 -->
            <div class="section department-section">
                <div class="section-title">选择科室</div>
                <van-cell-group inset>
                    <van-cell is-link @click="showDepartmentPopup = true">
                        {{ selectedDepartment || '请选择科室' }}
                    </van-cell>
                </van-cell-group>
            </div>

            <!-- 选择医生 -->
            <div class="section doctor-section" v-if="selectedDepartment">
                <div class="section-title">选择医生</div>
                <van-cell-group inset>
                    <van-cell is-link @click="showDoctorPopup = true">
                        {{ selectedDoctor ? selectedDoctor.name : '请选择医生' }}
                    </van-cell>
                </van-cell-group>
            </div>

            <!-- 选择日期和时间 -->
            <div class="section time-section" v-if="selectedDoctor">
                <div class="section-title">选择日期和时间</div>
                <div class="date-selector">
                    <div v-for="(date, index) in scheduleDates" :key="index" class="date-item"
                        :class="{ active: activeDate === index }" @click="activeDate = index">
                        <div class="day">{{ date.day }}</div>
                        <div class="date">{{ date.date }}</div>
                    </div>
                </div>

                <div class="time-slots">
                    <div v-for="(slot, index) in timeSlots" :key="index" class="time-slot"
                        :class="{ active: selectedTimeSlot === index }" @click="selectedTimeSlot = index">
                        {{ slot.time }}
                    </div>
                </div>
            </div>

            <!-- 就诊须知 -->
            <div class="section notice-section">
                <div class="section-title">就诊须知</div>
                <div class="notice-content">
                    <p>1. 请携带有效身份证件（身份证、社保卡等）准时就诊</p>
                    <p>2. 请提前30分钟到达医院，准备相关资料</p>
                    <p>3. 如需取消预约，请提前24小时操作</p>
                </div>
            </div>
        </div>

        <!-- 底部提交按钮 -->
        <div class="bottom-bar">
            <div class="fee-info">
                <span class="fee-label">挂号费：</span>
                <span class="fee-amount">¥{{ selectedDoctor ? selectedDoctor.fee : 0 }}</span>
            </div>
            <van-button type="primary" :disabled="!canSubmit" @click="onSubmit">提交预约</van-button>
        </div>

        <!-- 就诊人选择弹窗 -->
        <van-popup v-model:show="showPatientPopup" position="bottom" round>
            <div class="popup-header">
                <div class="popup-title">选择就诊人</div>
                <van-icon name="cross" @click="showPatientPopup = false" />
            </div>
            <div class="popup-content">
                <van-radio-group v-model="selectedPatientId">
                    <van-cell-group>
                        <van-cell v-for="patient in patients" :key="patient.id" clickable
                            @click="selectedPatientId = patient.id">
                            <template #title>
                                <div class="patient-item">
                                    <div>
                                        <div class="patient-name">{{ patient.name }}</div>
                                        <div class="patient-id">{{ patient.idCard }}</div>
                                    </div>
                                    <van-radio :name="patient.id" />
                                </div>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>

                <div class="add-patient">
                    <van-button block plain type="primary" icon="plus" @click="onAddPatient">添加就诊人</van-button>
                </div>
            </div>
        </van-popup>

        <!-- 科室选择弹窗 -->
        <van-popup v-model:show="showDepartmentPopup" position="bottom" round>
            <div class="popup-header">
                <div class="popup-title">选择科室</div>
                <van-icon name="cross" @click="showDepartmentPopup = false" />
            </div>
            <div class="popup-content">
                <van-radio-group v-model="selectedDepartment">
                    <van-cell-group>
                        <van-cell v-for="dept in departments" :key="dept" clickable @click="selectedDepartment = dept">
                            <template #title>
                                <div class="department-item">
                                    <span>{{ dept }}</span>
                                    <van-radio :name="dept" />
                                </div>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </div>
        </van-popup>

        <!-- 医生选择弹窗 -->
        <van-popup v-model:show="showDoctorPopup" position="bottom" round>
            <div class="popup-header">
                <div class="popup-title">选择医生</div>
                <van-icon name="cross" @click="showDoctorPopup = false" />
            </div>
            <div class="popup-content">
                <van-radio-group v-model="selectedDoctorId">
                    <van-cell-group>
                        <van-cell v-for="doctor in doctors" :key="doctor.id" clickable
                            @click="selectedDoctorId = doctor.id">
                            <template #title>
                                <div class="doctor-item">
                                    <div class="doctor-info">
                                        <div class="doctor-name">{{ doctor.name }}</div>
                                        <div class="doctor-title">{{ doctor.title }}</div>
                                    </div>
                                    <div class="doctor-fee">¥{{ doctor.fee }}</div>
                                    <van-radio :name="doctor.id" />
                                </div>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </div>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import PageHeader from '@/components/common/PageHeader.vue'

const route = useRoute()
const router = useRouter()
const hospitalId = Number(route.params.id)
const doctorId = route.query.doctorId ? Number(route.query.doctorId) : null

// 模拟医院数据
const hospital = ref({
    id: hospitalId,
    name: '协和医院'
})

// 就诊人相关数据
const showPatientPopup = ref(false)
const selectedPatientId = ref<number>()
const patients = ref([
    { id: 1, name: '张三', idCard: '110101199001011234' },
    { id: 2, name: '李四', idCard: '110101199202022345' }
])
const selectedPatient = computed(() => {
    if (!selectedPatientId.value) return null
    return patients.value.find(p => p.id === selectedPatientId.value)
})

// 科室相关数据
const showDepartmentPopup = ref(false)
const selectedDepartment = ref('')
const departments = ref(['心内科', '呼吸科', '神经科', '骨科', '眼科', '口腔科', '儿科'])

// 医生相关数据
const showDoctorPopup = ref(false)
const selectedDoctorId = ref<number>()
const doctors = ref([
    { id: 1, name: '张医生', title: '主任医师', fee: 30 },
    { id: 2, name: '李医生', title: '副主任医师', fee: 20 },
    { id: 3, name: '王医生', title: '主治医师', fee: 15 }
])
const selectedDoctor = computed(() => {
    if (!selectedDoctorId.value) return null
    return doctors.value.find(d => d.id === selectedDoctorId.value)
})

// 时间相关数据
const activeDate = ref(0)
const selectedTimeSlot = ref<number>()
const scheduleDates = ref([
    { day: '今天', date: '5/20' },
    { day: '明天', date: '5/21' },
    { day: '周五', date: '5/22' },
    { day: '周六', date: '5/23' },
    { day: '周日', date: '5/24' }
])
const timeSlots = ref([
    { time: '08:00 - 09:00' },
    { time: '09:00 - 10:00' },
    { time: '10:00 - 11:00' },
    { time: '13:30 - 14:30' },
    { time: '14:30 - 15:30' },
    { time: '15:30 - 16:30' }
])

// 是否可以提交
const canSubmit = computed(() => {
    return selectedPatient.value &&
        selectedDepartment.value &&
        selectedDoctor.value &&
        (selectedTimeSlot.value !== undefined)
})

// 添加就诊人
const onAddPatient = () => {
    router.push('/profile/patients/add')
}

// 提交预约
const onSubmit = () => {
    if (!canSubmit.value) {
        showToast('请完善预约信息')
        return
    }

    const date = scheduleDates.value[activeDate.value]
    const slot = timeSlots.value[selectedTimeSlot.value!]

    showToast('预约成功')
    // 在实际应用中，这里应该发送预约请求到API
    router.push(`/appointments`)
}

// 如果URL中有doctorId，自动选择对应医生和科室
watch(() => route.query.doctorId, () => {
    if (doctorId) {
        const doctor = doctors.value.find(d => d.id === doctorId)
        if (doctor) {
            selectedDoctorId.value = doctor.id
            selectedDepartment.value = '心内科' // 假设这个医生属于心内科
        }
    }
}, { immediate: true })

onMounted(() => {
    // 在实际应用中，这里应该从API获取医院、科室、医生和就诊人数据
    console.log(`加载医院ID: ${hospitalId}`)
})
</script>

<style scoped lang="scss">
.booking-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-top: 46px; // 为顶部导航栏预留空间
    padding-bottom: 60px; // 为底部按钮预留空间

    .page-content {
        padding: 0 0 16px;
    }

    .hospital-info {
        background: #fff;
        padding: 16px;
        margin-bottom: 8px;

        .hospital-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }

        .department-name {
            font-size: 14px;
            color: #666;
        }
    }

    .section {
        background: #fff;
        padding: 16px;
        margin-bottom: 8px;

        .section-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 12px;
        }
    }

    .patient-info {
        .patient-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
        }

        .patient-id {
            font-size: 12px;
            color: #999;
        }
    }

    .date-selector {
        display: flex;
        overflow-x: auto;
        margin-bottom: 16px;

        &::-webkit-scrollbar {
            display: none;
        }

        .date-item {
            flex: 0 0 70px;
            text-align: center;
            padding: 8px 0;
            border-radius: 4px;
            margin-right: 8px;
            background: #f5f5f5;

            &.active {
                background: #E6F7FF;

                .day,
                .date {
                    color: #1890FF;
                }
            }

            .day {
                font-size: 14px;
                color: #333;
                margin-bottom: 4px;
            }

            .date {
                font-size: 12px;
                color: #666;
            }
        }
    }

    .time-slots {
        display: flex;
        flex-wrap: wrap;

        .time-slot {
            width: calc(33.33% - 8px);
            text-align: center;
            padding: 10px 0;
            margin-right: 8px;
            margin-bottom: 8px;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 14px;
            color: #333;

            &:nth-child(3n) {
                margin-right: 0;
            }

            &.active {
                background: #E6F7FF;
                color: #1890FF;
            }
        }
    }

    .notice-content {
        font-size: 14px;
        color: #666;
        line-height: 1.6;

        p {
            margin: 0 0 8px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

        .fee-info {
            .fee-label {
                font-size: 14px;
                color: #666;
            }

            .fee-amount {
                font-size: 16px;
                font-weight: 500;
                color: #FF525D;
            }
        }

        .van-button {
            width: 140px;
            height: 40px;
            border-radius: 20px;
        }
    }

    // 弹窗样式
    .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #f5f5f5;

        .popup-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }
    }

    .popup-content {
        padding: 16px;
        max-height: 60vh;
        overflow-y: auto;

        .patient-item,
        .department-item,
        .doctor-item {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .doctor-info {
                flex: 1;

                .doctor-name {
                    font-size: 14px;
                    color: #333;
                    margin-bottom: 4px;
                }

                .doctor-title {
                    font-size: 12px;
                    color: #666;
                }
            }

            .doctor-fee {
                font-size: 14px;
                color: #FF525D;
                margin-right: 16px;
            }
        }

        .add-patient {
            margin-top: 16px;
        }
    }
}
</style>